<template>
  <ul class="el-upload-list el-upload-list--picture-card">
    <li class="el-upload-list__item is-ready">
      <template v-if="isPic()">
        <el-image ref="image" :src="fileUrl" fit="contain" style="width: 100%">
          <template #error>
            <el-icon :size="146" class="el-upload-list__item-thumbnail">
              <Picture />
            </el-icon>
          </template>
        </el-image>

        <el-image-viewer
          v-if="showViewer"
          :url-list="[fileUrl]"
          @close="showViewer = false"
        />
      </template>

      <template v-if="isVideo()">
        <video
          ref="video"
          :src="fileUrl"
          controls
          autoplay
          style="margin: 0 auto"
        ></video>
      </template>

      <div class="el-upload-list__item-actions">
        <template v-if="value">
          <el-form>
            <el-button text type="primary" @click="onPreview()">
              预览
            </el-button>
          </el-form>
          <br />

          <el-button text type="primary" @click="value = ''">删除</el-button>

          <br />
        </template>

        <el-upload
          ref="upload"
          name="files"
          :action="baseURL + '/fileStorage'"
          :headers="{ Authorization: loginUserToken }"
          :limit="1"
          :data="{ fileCatalog }"
          :show-file-list="false"
          :on-exceed="onExceedHandler"
          :on-error="onErrorHandler"
          :on-success="onSuccessHandler"
          :accept="accept"
        >
          <template #trigger>
            <el-button text type="primary">上传</el-button>
          </template>
        </el-upload>
        <br />
        <slot name="button"> </slot>
      </div>
    </li>
  </ul>
</template>
<script>
import { genFileId } from 'element-plus'

export default {
  name: 'JFileUpload',
  emits: ['update:modelValue'],
  props: {
    modelValue: {
      type: String,
    },
    fileCatalog: {
      type: String,
      required: true,
    },
    accept: {
      type: String,
      default: '.jpg,.png,.jpeg',
    },
  },
  data() {
    return {
      showViewer: false,
    }
  },
  computed: {
    baseURL() {
      return window.baseURL.fileStorage
    },
    loginUserToken() {
      return this.$store.getters.loginUserToken
    },
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      },
    },
    fileUrl() {
      if (!this.value) {
        return null
      }

      return this.baseURL + this.value
    },
  },
  methods: {
    isPic() {
      if (!this.value) {
        return false
      }

      return (
        this.value.endsWith('.jpg') ||
        this.value.endsWith('.png') ||
        this.value.endsWith('.jpeg') ||
        this.value.endsWith('.JPG') ||
        this.value.endsWith('.PNG') ||
        this.value.endsWith('.JPEG')
      )
    },
    isVideo() {
      if (!this.value) {
        return false
      }

      return (
        this.value.endsWith('.mp4') ||
        this.value.endsWith('.avi') ||
        this.value.endsWith('.webm') ||
        this.value.endsWith('.MP4') ||
        this.value.endsWith('.AVI') ||
        this.value.endsWith('.WEBM')
      )
    },

    onExceedHandler(files) {
      const upload = this.$refs.upload
      upload.clearFiles()
      const file = files[0]
      file.uid = genFileId()
      upload.handleStart(file)
      upload.submit()
    },
    onSuccessHandler(res, file, files) {
      if (res.resultCode === 200) {
        this.$message.success('文件上传成功')
        this.value = res.data[0].fileUrl
      } else {
        this.$message.error(res.message || '文件上传失败')
      }
    },
    onErrorHandler() {
      this.$message.error('文件上传失败')
    },

    onPreview() {
      if (this.isPic()) {
        this.showViewer = true
      } else if (this.isVideo()) {
        const video = this.$refs.video
        if (video.requestFullscreen) {
          video.requestFullscreen()
        } else if (video.webkitRequestFullscreen) {
          /* Safari */
          video.webkitRequestFullscreen()
        } else if (video.msRequestFullscreen) {
          /* IE11 */
          video.msRequestFullscreen()
        } else if (video.mozRequestFullScreen) {
          /* Firefox */
          video.mozRequestFullScreen()
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.el-upload-list__item-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
</style>
